<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页</title>
</head>
<body>
    <!--错误 login/register/  会在当前页面url后继续补
    正确写法/login/register/  ip:port后开始-->
    <form id="register-form" action="/login/register/" method="post">
        {% csrf_token %}
        用户名：<input id="form-name" type="text" name="name">        <br>
        密&emsp;码：<input type="password" name="password">           <br>
        邮&emsp;箱：<input type="text" name="email">                   <br>
        备&emsp;注：<input type="text" name="note">                    <br>
        爱&emsp;好：<input type="text" name="hobby">                   <br>
        <button type="submit">注册</button>
    </form>
    <h3 id="error_message" style="color: red">{{ error_message }}</h3>

<script>
    formName = document.getElementById('form-name')
    console.log(formName)
    // onchange 表单输出框内容变化并失去焦点focus时触发. onblur失去焦点  onfucus获得焦点.
    formName.onchange = function(){
        // js发送了http异步请求, xhr
        var xhr = new XMLHttpRequest()
        xhr.open('post','http://127.0.0.1:8000/login/register_check/')
        // 添加请求头,编码表单中的中文参数
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
        // 发送请求和传表单参数
        xhr.send('name=张')

        // xhr请求状态 0未初始化:  1正在加载中 : 2已加载  ;  3交互中; 4完成
        xhr.onreadystatechange = function(){
            console.log(xhr)
            if (xhr.readyState==4 && xhr.status==200){
                console.log(xhr.responseText)
                respTEXT = xhr.responseText
                // json字符串转js对象
                resp_obj = JSON.parse(respTEXT)
                console.log(resp_obj)
                error_message = resp_obj.error_message
                console.log(error_message)
                document.getElementById('error_message').innerHTML=error_message
            }
        }
{#        console.log('触发了onchange事件')#}
    }
</script>

</body>
</html>